<template>
    <div>
        <!--<el-form :inline="true" :disabled="disabled">-->
        <el-form :inline="true" :disabled="disabled">
            <el-form-item label="一级分类">
                <el-select v-model="category1Id" placeholder="请选择" @change="category1Change">
                    <el-option :label="c1.name" :value="c1.id" v-for="c1 in category1List" :key="c1.id"></el-option>
                </el-select>
            </el-form-item>

            <el-form-item label="二级分类">
                <el-select v-model="category2Id" placeholder="请选择" @change="category2Change">
                    <el-option :label="c2.name" :value="c2.id" v-for="c2 in category2List" :key="c2.id"></el-option>
                </el-select>
            </el-form-item>

            <el-form-item label="三级分类">
                <el-select v-model="category3Id" placeholder="请选择" @change="category3Change">
                    <el-option :label="c3.name" :value="c3.id" v-for="c3 in category3List" :key="c3.id"></el-option>
                </el-select>
            </el-form-item>
        </el-form>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                category1Id: '',
                category2Id: '',
                category3Id: '',
                category1List: [],
                category2List: [],
                category3List: [],
                disabled: false,
            }
        },
        methods: {
            // 一级分类
            async getCateory() {
                const {code,data} = await this.$API.attrs.getCategory1();
                if(code === 200) {
                    this.category1List = data;
                }
            },
            async category1Change(item) {
                // item 当前选中的收集的value值
                this.category2List = [];
                this.category2Id = '';
                this.category3Id = '';
                this.category3List = [];
                const {code,data} = await this.$API.attrs.getCategory2(item);
                if(code === 200) {
                    this.category2List = data;
                }

                this.$emit('idChange',{id:this.category1Id,level:1});
            },
            async category2Change(item) {
                this.category3Id = '';
                this.category3List = [];
                const {code,data} = await this.$API.attrs.getCategory3(item);
                if(code === 200) {
                    this.category3List = data;
                }
                this.$emit('idChange',{id:this.category2Id,level:2});
            },
            async category3Change() {
                this.$emit('idChange',{id:this.category3Id,level:3});
            }
        },
        mounted() {
            this.getCateory();
        },
        name: "CategorySelector"
    }
</script>

<style scoped>

</style>
